<template>
  <div>
    <ToolBarComponent>
      <Button text="查询" :click-function="getQuestion"/>
    </ToolBarComponent>
    <ToolBarComponent>
      <h2>总统计表</h2>
      <Button text="隐藏" :click-function="hiddenTop"/>
      <Button text="展示" :click-function="showTop"/>
      <div class="total-list-table-div" ref="top-table">
        <table class="total-table">
          <tr v-for="item in totalList" :key="item" class="total-table-tr">
            <td class="total-table-td">{{item.name}}</td>
            <td class="total-table-td">{{item.num}}</td>
          </tr>
        </table>
      </div>
    </ToolBarComponent>
    <ToolBarComponent>
      <h2>分类统计表</h2>
      <Button text="隐藏" :click-function="hiddenBottom"/>
      <Button text="展示" :click-function="showBottom"/>
      <div class="total-table-div" ref="bottom-table">
        <table class="total-table top-table">
          <tr v-for="item in qstList" :key="item" class="total-table-tr">
            <td class="total-table-td">{{item.moduelName}}</td>
            <td class="total-table-td">{{item.level}}</td>
            <td class="total-table-td">{{item.num}}</td>
          </tr>
        </table>
      </div>
    </ToolBarComponent>
  </div>
</template>

<script>
import {postRequest} from "@/axio2";
import ToolBarComponent from "@/components/toolbar/ToolBarComponent";
import Button from "@/components/button/ButtonComponent";

export default {
  name: "TestQuestionTotalMain",
  components: {Button, ToolBarComponent},
  data(){
    return{
      qstList:[],
      totalList:[]
    }
  },
  methods:{
    getQuestion(){
      postRequest(
          "testManage/selectQstTotal.do",
          {},
          this.successCallBack,
          null,
          this
      )
    },
    successCallBack(resp, component){
      component.qstList = resp.data.resultData;
      component.totalList = [];
      let map = new Map;
      for (let data in resp.data.resultData) {
        let dataItem = resp.data.resultData[data];
        if(!map.has(dataItem.moduelName)){
          map.set(dataItem.moduelName,0);
        }
        map.set(dataItem.moduelName, map.get(dataItem.moduelName)+dataItem.num);
      }
      for (let mapKey of map.keys()) {
        component.totalList.push({name:mapKey, num:map.get(mapKey)})
      }
    },
    hiddenTop(){
      this.$refs["top-table"].style.display="none";
    },
    showTop(){
      this.$refs["top-table"].style.display="block";
    },
    hiddenBottom(){
      this.$refs["bottom-table"].style.display="none";
    },
    showBottom(){
      this.$refs["bottom-table"].style.display="block";
    },
  }
}
</script>

<style scoped>
.total-table{
  min-width: 50%;
  border-right: 1px solid #222222;
  border-left: 1px solid #222222;
  border-collapse: collapse;
  text-align: center;
  background: white;
}
.total-table-tr{
  border-bottom: 1px solid #222222;
  border-top: 1px solid #222222;
  line-height: 35px;
}
.total-table-td{
  border-right: 1px solid #222222;
}
</style>